<template>
	<view class="userPage">
		<view class="user-box">
			<image src="https://ts1.cn.mm.bing.net/th/id/R-C.814c9b608482fd0278149fcc01d28d24?rik=bOGzQQgPO5avAg&riu=http%3a%2f%2fup.deskcity.org%2fpic_source%2f81%2f4c%2f9b%2f814c9b608482fd0278149fcc01d28d24.jpg&ehk=kzEQwigpHHBFovf3Dew8kf1AwDjH8vHc4kPAJqC4awo%3d&risl=&pid=ImgRaw&r=0" mode="">
			</image>
			<view class="user" @click="goUserPage">
				<image class="avatar" :src="userInfo.avatar_file.url"></image>
				<!-- <image class="avatar" src="https://game.gtimg.cn/images/yxzj/zlkdatasys/images/image/20221102/16673885239917.jpg" mode=""></image> -->
				<view class="nickName">{{userInfo.nickname}}</view>
			</view>
		</view>
		<!-- 显示订单管理 -->
		<view class="card">
			<van-grid :border="false" :column-num="5">
				<van-grid-item icon="pending-payment" text="待付款" />
				<van-grid-item icon="tosend" text="待发货" />
				<van-grid-item icon="logistics" text="待收货" />
				<van-grid-item icon="paid" text="待确定" />
				<van-grid-item icon="credit-pay" text="退款/售后" />
			</van-grid>
		</view>
		<!-- 用户列表管理 -->
		<view class="card">
			<van-cell icon="location-o" title="地址管理" @click="goUserModule('address/list')" is-link></van-cell>
			<van-cell icon="coupon-o" title="优惠卷" is-link></van-cell>
			<van-cell icon="paid" title="我的钱包" is-link></van-cell>
			<van-cell icon="service-o" title="联系客服" is-link></van-cell>
			<van-cell icon="setting-o" title="设置" is-link></van-cell>
		</view>
		
		

		<!-- 底部导航栏 -->
		<van-tabbar v-model="active" @change="onChange">
			<van-tabbar-item icon="home-o">首页</van-tabbar-item>
			<van-tabbar-item icon="search">分类</van-tabbar-item>
			<van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
			<van-tabbar-item icon="setting-o">个人中心</van-tabbar-item>
		</van-tabbar>

	</view>
</template>

<script>
	import {ref} from 'vue';
	import Storage from '@/untils/storage.js';
	export default {
		data(){
			return{
				userInfo:{}
			}
		},
		onLoad() {
			this.userInfo = Storage.userinfo;
		},
		setup() {
			const active = ref(3);
			const onChange = (index) => {
				console.log(index);
				let router = ['index', 'cate', 'cart', 'user']
				uni.reLaunch({
					url: `/pages/${router[index]}/index`
				})
			};
			return {
				active,
				onChange
			};
		},
		methods: {
			goUserModule(e){
				uni.navigateTo({
					url:`/pages/user/${e}`
				})
			},
			goUserPage(e){
				if(!Storage.TokenOut){
					uni.navigateTo({
						url:"/pages/user/login/withpwd",
					})
				}else{
					uni.navigateTo({
						url:"/uni_modules/uni-id-pages/pages/userinfo/userinfo"
					})
				}
			},
			
		}
	}
</script>

<style lang="scss">
	.uni-app--showtopwindow [data-page="pages/component/view/view"] uni-page-head {
		display: none;
	}
	.userPage{
		background-color: #f2f2f2;
	}
	.user-box {
		width: 100%;
		height: 562upx;
		position: relative;
	}

	.user-box image {
		width: 100%;
		height: 100%;
	}

	.user-box .user {
		position: absolute;
		width: 700upx;
		height: 200upx;
		left: 25upx;
		top: 180upx;
		z-index: 1;
		display: flex;
		align-items: center;
	}

	.user-box .user .avatar {
		width: 100upx;
		height: 100upx;
		margin: 0 30upx;
		border-radius: 100%;
	}

	.user-box .user .nickName {
		font-size: 50upx;
	}

	
</style>
